<template>
  <ul class='couponx'>
    <Header>
      <router-link to='/decision' tag='i' slot='left' class="iconfont icon-jiantou1"></router-link>
      优惠券选择
    </Header>
    <li @click='nul' class="nul">
      不使用优惠券点这里
    </li>
    <li v-for="i of show" :key="i.couponid" @click="xz(i.couponid)">
      <div class="main-top"></div>
      <h3>{{ i.name }}</h3>
      <span>{{ i.contip }}</span>
    </li>
  </ul>
</template>
<style lang="scss">
@import '@/lib/reset.scss';
 .couponx {
  @include flex(); // -webkit-box-flex: 1;-ms-flex: 1;flex: 1;width: .1px;
  @include rect(100%,auto);
  @include flexbox();
  @include flex-direction(column);
  @include align-items();
  @include overflow();
  header {
    @include flexbox();
    @include justify-content(space-between);
  }
  .nul {
    @include rect(94%,0.4rem);
    @include text-align();
  }
  li {
    @include rect(94%, 1.3rem);
    @include background-color(#fff);
    @include margin(0.1rem 0 0);
    @include border-radius(0.05rem);
    @include flexbox();
    @include flex-direction(column);
    .main-top {
      @include rect(100%,0.05rem);
      @include border-radius(0.05rem 0.05rem 0 0);
      @include background-color(#d22);
    }
    h3 {
      @include rect(90%,0.3rem);
      @include margin(0.2rem 0 0);
      @include padding(0 5% 0);
      @include font-size(0.2rem);
      @include font-weight(normal);
    }
    span {
      @include display(block);
      @include rect(90%,0.3rem);
      @include margin(0.06rem 0 0);
      @include color(#666);
      @include padding(0 5% 0);
    }
  }
}
</style>
<script>
import Header from '@/components/header.vue'
import axios from '@/utils/request'
import { Toast } from 'vant'
export default {
  data () {
    return {
      show: ''
    }
  },
  components: {
    Header
  },
  created () {
    var userid = localStorage.userid
    axios.get('/coupon?userid=' + userid).then(res => {
      if (res.data.code !== '11010') {
        this.show = res.data.data
      }
    })
  },
  methods: {
    xz (id) {
      sessionStorage.couponid = id
      Toast('选择成功')
      this.$router.push('/decision')
    },
    nul () {
      sessionStorage.couponid = ''
      Toast('当前没有使用优惠券')
      this.$router.push('/decision')
    }
  }
}
</script>
